
<aside class="right-side">                
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <h1>Quản lý
                        <small>Sản phẩm</small>
                    </h1>
                    <ol class="breadcrumb">
                        <li><a href="#"><i class="fa fa-dashboard"></i>Trang chủ</a></li>
                       <li class="active">Sản phẩm</li>
                    </ol>
                </section>

                <!-- Main content -->
                <section class="content">
                    <div class="row">
                        <div class="col-xs-12"> 
                            <div class="box">
                                <div class="box-header">
                                    <h3 class="box-title">Sản phẩm</h3> 
                                </div>
                                <div class="box-body table-responsive">
                                    <div id="example1_wrapper" class="dataTables_wrapper form-inline" role="grid">
                                        <table id="example1" class="table table-bordered table-striped dataTable" aria-describedby="example1_info">
                                        <thead>
                                            <tr role="row"><th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending" style="width: 172px;">Tên sản phẩm</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" style="width: 251px;">Miêu tả</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" style="width: 251px;">Đơn Giá</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending" style="width: 251px;">Loại sản phẩm</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending" style="width: 147px;"></th></tr>
                                        </thead>
                                        
                                    <tbody role="alert" aria-live="polite" aria-relevant="all">
                                        <?php
                                        if(count($products) > 0) {
                                        foreach ($products as $prod) {?>
                                        <tr id="<?php echo $prod->id;?>">
                                                <td class=" sorting_1"><?php echo $prod->name;?></td>
                                                <td class=""><?php echo $prod->discription;?></td>
                                                <td class=""><?php echo $prod->price;?></td>
                                                <td class=""><?php echo $prod->cate_name;?><input id="<?php echo 'cate_id_' . $prod->id; ?>" style="display: none" value="<?php echo $prod->cate_id;?>"/></td>
                                                <td class=" ">
                                                    <button onclick="add()" class="btn btn-primary btn-flat">Thêm</button><br/><button onclick="edit(<?php echo $prod->id;?>)" class="btn btn-info btn-flat">&nbsp;&nbsp;Sửa&nbsp;&nbsp;</button><br/><button onclick="delete_row(<?php echo $prod->id; ?>)" class="btn btn-danger btn-flat">&nbsp;&nbsp;Xóa&nbsp;&nbsp;</button>
                                                </td>
                                            </tr>
                                        <?php }} else { ?>
                                         <tr id="null">
                                            <td class=" sorting_1">Không có dữ liệu</td>
                                            <td class=" "></td>
                                            <td class=" "></td>
                                            <td class=" "></td>
                                            <td><button onclick="add()" class="btn btn-primary btn-flat">Thêm</button><br/><button class="btn btn-info btn-flat" disable>&nbsp;&nbsp;Sửa&nbsp;&nbsp;</button><br/><button class="btn btn-danger btn-flat" disable>&nbsp;&nbsp;Xóa&nbsp;&nbsp;</button></td>
                                        </tr>
                                        <?php }?>
                                        </tbody></table>
                                    </div>
                                </div><!-- /.box-body -->
                            </div><!-- /.box -->
                        </div>
                    </div>
                </section><!-- /.content -->
            </aside>


<script type="text/javascript">
     //get base url;
    var base_url = '<?php echo base_url();?>';

    function add () {
        var newRow = '<tr id="new_row"><td><input'
            + ' type="text" id="name" class="form-control"/></td><td><input'
            + ' type="text" id="discription" class="form-control"/></td>'
            + '<td><input type="text" id="price" class="form-control"/></td>' 
            + '<td><select id="father"><option value="0">Chọn loại sản phẩm'
            + '</option></select>'
            + '</td><td><button onclick="ok_add()"'
            + 'class="btn btn-primary btn-flat">Đồng ý' 
            + '</button>&nbsp;&nbsp;<button onclick="cancle_add()"'
            + 'class="btn btn-danger btn-flat">Hủy</button>'
            + '</td></tr>';

        $('#example1 > tbody > tr:first').before(newRow);

        $.ajax({
             type: "GET",
             url: base_url + "category/get",  
             cache : false,
             success: 
                  function(json){
                    var obj = jQuery.parseJSON(json);

                    var i = 0;
                    for(; i < obj.cates.length; i++) {
                        var item = '<option value="' + obj.cates[i].id + '">'
                        + obj.cates[i].name + '</option>';

                        $('#father').append(item);
                    }
                  },
            error: function() {

            }
        });
    }


    function ok_add() {
        //get value from input has id = name
        var name_value = $('input#name').val();
        var discription_value = $('input#discription').val();
        var price_value = $('input#price').val();

        //get value from input has id = address
        var cate_id = $('select#father').val();
        var cate_name = $('#father option:selected').text();

        if(!name_value) {
            alert("Tên sản phẩm không được để trống");
            return false;
        }

        if(!price_value) {
            alert("Giá không được để trống");
            return false;
        }else {
            if(!$.isNumeric(price_value)) {
               alert("Giá không đúng. Vui lòng nhập số");
                return false; 
            }
        }

        if(cate_id == '0') {
            alert("Vui lòng chọn loại sản phẩm");
            return false;
        }

        //data to submit
        var product = {
            name : name_value,
            discription: discription_value,
            price : price_value,
            cate_id : cate_id
        };

        $.ajax({
         type: "POST",
         url: base_url + "product/add_new", 
         data: product,
         dataType: "text",  
         cache : false,
         success: 
              function(json){
                alert('Thêm thành công!!!');
                var obj = jQuery.parseJSON(json);

                var dataRow = [
                    name_value,
                    discription_value,
                    price_value,
                    cate_name + '<input id="cate_id_' + obj['id']
                    + '" style="display: none" value="'
                    + cate_id + '"/>',
                    '<button id="' + obj['id'] + '" onclick="add()"'
                    + 'class="btn btn-primary btn-flat">Thêm</button><br/>'
                    + '<button onclick="edit(' + obj['id'] + ')"'
                    + 'class="btn btn-info btn-flat">'
                    + '&nbsp;&nbsp;Sửa&nbsp;&nbsp;</button><br/>'
                    + '<button onclick="delete_row(' + obj['id'] + ')"'
                    + 'class="btn btn-danger btn-flat">'
                    + '&nbsp;&nbsp;Xóa&nbsp;&nbsp;</button>'
                ];

                //add row to data table
                var t = $('#example1').DataTable();
                
                t.row('#null').remove().draw();
                t.row.add(dataRow).draw();

                //add id for new row
                $('button#' + obj['id']).parent().parent().attr('id', obj['id']);
              },
        error: function() {
                alert('Thêm thất bại!!!');
            }
        });
    }

    function cancle_add() {
        $('#example1 >tbody >tr:first').remove();
    }

    //edit data row
    function edit(id) {
        var name_value = $('tr#' + id + ' > td:first').text();
        var price_value = $('tr#' + id + ' > td:nth-child(3)').text();
        var discription_value = $('tr#' + id + ' > td:nth-child(2)').text();
        
        var cate_id = $('input#cate_id_' + id).val();

        var newRow = '<tr id="new_row"><td><input'
            + ' type="text" id="name" value="' + name_value + '"'
            + ' class="form-control"/></td><td><input'
            + ' type="text" id="discription" value="' + discription_value + '"'
            + ' class="form-control"/></td><td><input'
            + ' type="text" id="price" value="' + price_value + '"'
            + ' class="form-control"/></td>' 
            + '<td><select id="father"><option value="0">Chọn loại sản phẩm'
            + '</option></select></td>'
            + '<td><button onclick="ok_edit(' + id + ')"'
            + 'class="btn btn-primary btn-flat">Đồng ý' 
            + '</button>&nbsp;&nbsp;<button onclick="cancle_edit(' + id +')"'
            + 'class="btn btn-danger btn-flat">Hủy</button>'
            + '</td></tr>';

             $.ajax({
                 type: "GET",
                 url: base_url + "category/get",  
                 cache : false,
                 success: 
                      function(json){
                        var obj = jQuery.parseJSON(json);

                        var i = 0;
                        for(; i < obj.cates.length; i++) {
                            var item = '';

                            if(obj.cates[i].id != cate_id) {
                                item = '<option value="' + obj.cates[i].id + '">'
                                + obj.cates[i].name + '</option>';
                            }else
                                item = '<option value="' + obj.cates[i].id + '"'
                                + 'selected>' + obj.cates[i].name + '</option>';

                            $('#father').append(item);
                        }
                      },
                error: function() {

                }
            });

        $('#example1 > tbody').find('tr#' + id).hide();    
        $('#example1 > tbody > tr#' + id).before(newRow);
    }

    //ok edit
     function ok_edit(id) {
       //get value from input has id = name
        var name_value = $('input#name').val();
        var discription_value = $('input#discription').val();
        var price_value = $('input#price').val();

        //get value from input has id = address
        var cate_id = $('select#father').val();
        var cate_name = $('#father option:selected').text();

        if(!name_value) {
            alert("Tên sản phẩm không được để trống");
            return false;
        }

        if(!price_value) {
            alert("Giá không được để trống");
            return false;
        }else {
            if(!$.isNumeric(price_value)) {
               alert("Giá không đúng. Vui lòng nhập số");
                return false; 
            }
        }

        if(cate_id == '0') {
            alert("Vui lòng chọn loại sản phẩm");
            return false;
        }

        //data to submit
        var product = {
            id: id,
            name : name_value,
            discription: discription_value,
            price : price_value,
            cate_id : cate_id
        };

        $.ajax({
         type: "POST",
         url: base_url + "product/edit", 
         data: product,
         dataType: "text",  
         cache : false,
         success: 
              function(json){
                alert('Cập nhật thành công!!!');

                var dataRow = [
                    name_value,
                    discription_value,
                    price_value,
                    cate_name + '<input id="cate_id_' + id
                    + '" style="display: none" value="'
                    + cate_id + '"/>',
                    '<button id="' + id + '" onclick="add()"'
                    + 'class="btn btn-primary btn-flat">Thêm</button><br/>'
                    + '<button onclick="edit(' + id + ')"'
                    + 'class="btn btn-info btn-flat">'
                    + '&nbsp;&nbsp;Sửa&nbsp;&nbsp;</button><br/>'
                    + '<button onclick="delete_row(' + id + ')"'
                    + 'class="btn btn-danger btn-flat">'
                    + '&nbsp;&nbsp;Xóa&nbsp;&nbsp;</button>'
                ];
                //add row to data table
                var t = $('#example1').DataTable();
                //remove old data
                t.row('#' + id).remove().draw();
                t.row.add(dataRow).draw();

                //add id for new row
                $('button#' + id).parent().parent().attr('id', id);
              },
        error: function() {
                alert('Cập nhật thất bại!!!');
            }
        });
    }   

    function cancle_edit (id) {
        $('#example1 > tbody').find('tr#new_row').remove();    
        $('#example1 > tbody > tr#' + id).show();
    }

     function delete_row (id) {
        if (confirm('Bạn có muốn xóa, thao tác này không thể phục hồi?')) {
            //data to submit
            var product = {
                id : id
            };

            $.ajax({
             type: "POST",
             url: base_url + "product/delete", 
             data: product,
             dataType: "text",  
             cache : false,
             success: 
                  function(json){
                    alert('Xóa thành công!!!');

                    //add row to data table
                    var t = $('#example1').DataTable();

                    //check if database has no row
                    if($('#example1 > tbody').children('tr').length == 1) {
                        var dataRow = [
                            'Không có dữ liệu',
                            '',
                            '',
                            '',
                            '<button onclick="add()"'
                            + ' class="btn btn-primary btn-flat">Thêm'
                            + '</button><br/>'
                            + '<button class="btn btn-info btn-flat"'
                            + ' disable>&nbsp;&nbsp;Sửa&nbsp;&nbsp;</button>'
                            + '<br/><button '
                            + ' class="btn btn-danger btn-flat" disable>'
                            + '&nbsp;&nbsp;Xóa&nbsp;&nbsp;</button>'
                        ];
                        t.row.add(dataRow).draw();

                        //remove old data
                        t.row('#' + id).remove().draw();

                        //add id for new row
                        $('#example1 >tbody>tr:first').attr('id', 'null');
                    }
                    //remove old data
                    t.row('#' + id).remove().draw();

                  },
            error: function() {
                    alert('Xóa thất bại!!!');
                }
            });
        }
    }

</script>